import BaseFrame from './BaseFrame';
import * as THREE from 'three';
import vertexShader from '@/shader/spread/vert.glsl';
import fragmentShader from '@/shader/spread/frag.glsl';
export default class Spread extends BaseFrame {
	constructor() {
		super();
		this.initScene();
		this.initGui();
		this.renderOnce();
	}
	initScene() {
		this.camera.position.set(0, 8, 8);
		this.groundMesh.visible = false;
		let geom = new THREE.PlaneGeometry(10, 10);
		this.shaderMaterial = new THREE.ShaderMaterial({
			uniforms: {
				//时间变量
				uTime: {
					value: 0,
				},
				//速度
				uSpeed: {
					value: 5,
				},
				//颜色
				uColor: {
					value: new THREE.Color(0x46c2f7),
				},
				//中心点x
				uPositionX: {
					value: 0,
				},
				//中心点y
				uPositionY: {
					value: 0,
				},
				//传播范围
				uRadio: {
					value: 5,
				},
				//环宽度
				uRingWidth: {
					value: 0.2,
				},
				//环模糊半径
				uShadowRadio: {
					value: 0.5,
				},
			},
			vertexShader: vertexShader,
			fragmentShader: fragmentShader,
			blending: THREE.AdditiveBlending,
			transparent: true,
			depthTest: false,
		});
		let mesh = new THREE.Mesh(geom, this.shaderMaterial);
		mesh.rotation.x = -Math.PI / 2;
		this.scene.add(mesh);
	}
	initGui() {
		this.gui.add(this.shaderMaterial.uniforms.uSpeed, 'value').min(1).max(10).step(0.01).name('速度');
		this.gui.add(this.shaderMaterial.uniforms.uPositionX, 'value').min(-10).max(10).step(0.01).name('位置X');
		this.gui.add(this.shaderMaterial.uniforms.uPositionY, 'value').min(-10).max(10).step(0.01).name('位置Y');
		this.gui.add(this.shaderMaterial.uniforms.uRadio, 'value').min(1).max(5).step(0.01).name('范围');
		this.gui.add(this.shaderMaterial.uniforms.uRingWidth, 'value').min(0).max(1).step(0.01).name('圆环宽度');
		this.gui.add(this.shaderMaterial.uniforms.uShadowRadio, 'value').min(0).max(0.5).step(0.01).name('模糊范围');
		this.gui.addColor(this.shaderMaterial.uniforms.uColor, 'value').name('颜色');
	}
	update() {
		if (this.shaderMaterial) {
			this.shaderMaterial.uniforms.uTime.value = this.clock.getElapsedTime();
		}
	}
}
